<template>
  <div class="Sider" :class="conversation.isActive ? 'Active' : ''">
    <div class="SiderItem p-3" @click="$emit('select', conversation.id)">
      <img :src="!conversation.isActive ? liaotian : liaotianBlue" alt="" :class="conversation.isActive ? 'liaotianActive' : 'liaotian'" />
      <div :class="conversation.isActive ? 'titleActive' : 'title'">{{ conversation.title }}</div>
    </div>
    <img :src="deleteImg" alt="" class="deleteImg" v-if="conversation.isActive" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Conversation } from '../types/chat';
  import liaotian from '../ui/旺旺.png';
  import liaotianBlue from '../ui/旺旺blue.png';
  import deleteImg from '../ui/删除.png';
  const props = defineProps<{
    conversation: Conversation;
  }>();

  const emit = defineEmits<{
    (e: 'select', id: string): void;
  }>();

  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat('en-US', {
      hour: '2-digit',
      minute: '2-digit',
    }).format(date);
  };
</script>

<style lang="scss" scoped>
  .Sider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
  }
  .SiderItem {
    display: flex;
    align-items: center;
    // color: #000;
    cursor: pointer;
    width: 85%;
    .liaotian {
      width: 18px;
      height: 18px;
      margin-right: 8px;
    }
    .liaotianActive {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
    .title {
      font-size: 1.5vh;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }
    .titleActive {
      font-size: 1.75vh;
      white-space: nowrap;
      overflow: hidden;
      color: #000;
      text-overflow: ellipsis;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }
  }
  .deleteImg {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
  .Active {
    background-color: #f6f6ff; //选中的背景颜色
    color: #7781fc;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
  }
</style>
